import React from 'react'
import { Card } from 'components/Base'
import PieCard from './PieCard'
import ProjectStatus from './ProjectStatus'
import Gateway from './GateWay'

const DevEnv = () => {
  const [cpu, setCpu] = React.useState({ used: 0, total: 0 })
  const [mem, setMem] = React.useState({ used: 0, total: 0 })

  React.useEffect(() => {
    request
      .get(
        '/kapis/clusters/host/resources.kubesphere.io/v1alpha2/namespaces/project/quotas'
      )
      .then(res => {
        console.log(res.data)
        const { hard, used } = res.data
        const cpuInfo = {
          used: parseInt(used['requests.cpu'], 10) || 0,
          total: parseInt(hard['requests.cpu'], 10) * 1024 || 0,
        }
        const memInfo = {
          used: parseInt(used['requests.memory'], 10),
          total: parseInt(hard['requests.memory'], 10) * 1024 || 0,
        }
        setCpu(cpuInfo)
        setMem(memInfo)
      })
  }, [])

  return (
    <div className="content">
      <Card className={'card1'} title={'ROM/存储使用情况'}>
        <PieCard title={'ROM(M)'} used={cpu.used} total={cpu.total} />
        <PieCard title={'存储(M)'} used={mem.used} total={mem.total} />
      </Card>
      <Card className={'card2'} title={'项目网关情况'}>
        <Gateway />
      </Card>
      <Card className={'card3'} title={'项目状态总览'}>
        <ProjectStatus />
      </Card>
    </div>
  )
}

export default DevEnv
